<template>
  <div class="box">
    <header @click="goBack01">&lt;</header>
    <div class="img01">
      <img :src="Classify02.img04" />
    </div>
    <section class="box01">
      <div class="price">
        <p>{{ Classify02.price }}</p>
        <span class="num">已有{{ Classify02.num }}报名 </span>
      </div>
      <span class="type">{{ Classify02.type }}</span>
      <span class="type01">{{ Classify02.type01 }}</span>
    </section>
    <section class="box02">
      <div class="time">时间: {{ Classify02.time }}</div>
    </section>

    <section class="particulars">
      <p>课程简介</p>
      <div>
        {{ Classify02.synopsis01 }}
      </div>
      <p>适用人群</p>
      <div>
        {{ Classify02.synopsis02 }}
      </div>
    </section>
    <footer>
      <div>咨询</div>
      <div>想学</div>
      <router-link :to="Classify01S">
        <button>立即报名</button>
      </router-link>
    </footer>
  </div>
</template>

<script>
// import axios from "axios";

export default {
  name: "Classify02",
  data() {
    return {
      Classify02: [],
      Classify01S:[]
    };
  },
  created() {
    let xhr = new XMLHttpRequest();
    xhr.open(
      "get",
      "http://localhost:3000/Classify02/" + this.$route.params.id,
      true
    );
    xhr.onreadystatechange = () => {
      if (xhr.readyState == 4 && xhr.status == 200) {
        console.log("xhr.responseText", xhr.responseText);
        this.Classify02 = JSON.parse(xhr.responseText);
       if (this.Classify02.price == "免费") {
          this.Classify01S = "../Classify01S01";
        } else {
          this.Classify01S = '../Classify01S02'+"/"+this.Classify02.id;
        }
          console.log("this.Classify01",this.Classify01S)
      }
    };
    xhr.send();
  },
  methods: {
    goBack01() {
      this.$router.back();
    },
  },
};
</script>

<style scoped>
header {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: rgba(73, 73, 73, 0.452);
  margin: auto;
  font-size: 0.3rem;
  position: absolute;
  top: 0rem;
  left: 0.2rem;
  text-align: center;
  line-height: 0.35rem;
  color: white;
}
.box {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
}
.img01 {
  width: 90%;
  height: 2rem;
  margin: auto;
}
.img01 img {
  width: 100%;
  height: 100%;
}
.box01 {
  width: 90%;
  margin: 0.2rem;
}

.box03 {
  width: 80%;
  margin: auto;
}
.teacharS {
  width: 80%;
}
.teacharS01 {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
}
.teacharS img {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
}
.particulars {
  width: 80%;
  margin: auto;
  margin-top: 0.3rem;
}
footer {
  width: 90%;
  height: 0.5rem;
  margin: auto;
  display: flex;
  justify-content: space-between;
  line-height: 0.5rem;
  padding: 0.1rem;
  margin-top: 0.2rem;
}
button {
  height: .3rem;
  width: 1rem;
  background: rgb(245, 51, 51);
  color: rgb(253, 243, 243);
  overflow: unset;
  border: none;
}
.price {
  display: flex;
  align-content: center;
  justify-content: space-between;
  margin-bottom: 0.2rem;
}
.price p {
  font-size: 0.28rem;
  color: orangered;
}
.num {
  color: rgb(177, 169, 169);
}
.type {
  font-weight: bold;
  font-size: 0.2rem;
}

.time {
  width: 100%;
  height: 0.4rem;
  background: rgb(206, 205, 205);
  line-height: 0.4rem;
  text-align: center;
  margin-bottom: 0.2rem;
}

.particulars p {
  margin-top: 0.2rem;
  margin-bottom: 0.2rem;
  font-size: 0.2rem;
}
</style>
